<script setup lang='ts'>
  import { reactive, nextTick, watch } from 'vue';
  import { getDateArray, weekStarts, getLastData, getWeeKTime, getMonthTime, getPlayEndTime } from '@/utils'
  const $emit = defineEmits(['change','update:timeval'])
  const props = defineProps({
    /**
     * daterange 年月日
     * datetimerange 年月日时分秒
     */
    type:{
      type:String,
      default:'datetimerange',
    },
    timeval:{
      type:Object,
      default:{}
    }
  })
  watch(props,()=>{
    const { playTime , endTime } = props.timeval
    const { playTime:emitPlayTime , endTime:emitEndTime } = emitTimeObj
    if(playTime != emitPlayTime || endTime != emitEndTime) {
      initialTime()
    }
  })
  const action = reactive({
    dataValue:'' as any,
    dateType: "",
    format: '',
    dateTypeOptions:[] as Array<any>
  })
  /**
   * 选择日期类型的默认日期
   */
  const editDatePicker = () => {
    const obj:any = action.dateTypeOptions.find(res=> res.value == action.dateType) || { format:'YYYY-MM-DD HH:mm:ss', dataValue:getDateArray('ymdhis') }
    const { format, dataValue } = obj
    action.dataValue = null
    action.format = format;
    nextTick(()=>{
      action.dataValue = dataValue
      pickerChange()
    })
  };
  let emitTimeObj = {
    playTime:'',
    endTime:'',
  } as any
  const pickerChange = ()=>{
    if(action.dateType == 'week') {
      emitTimeObj = getWeeKTime(action.dataValue)
    }
    if(action.dateType == 'month') {
      emitTimeObj = getMonthTime(action.dataValue)
    }
    if(action.dateType == 'datetimerange') {
      emitTimeObj = getPlayEndTime(action.dataValue,'ymdhis')
    }
    if(action.dateType == 'daterange') {
      emitTimeObj = getPlayEndTime(action.dataValue,'ymd')
    }
    $emit('update:timeval', emitTimeObj)
    $emit('change',emitTimeObj)
  }
  const initialTime = ()=>{
    const dateTypeOptions = [
      { label: "周", value: "week", type:'week', format:"YYYY 第 ww 周", dataValue:weekStarts()  },
      { label: "月", value: "month", type:'month', format:"YYYY 年 MM 月", dataValue:getLastData() },
    ] as Array<any>
    if(props.type == 'daterange') {
      dateTypeOptions.unshift({ label: "日", value: "daterange",format:"YYYY-MM-DD", dataValue:getDateArray('ymd') })
    }
    if(props.type == 'datetimerange') {
      dateTypeOptions.unshift({ label: "日", value: "datetimerange",format:"YYYY-MM-DD HH:mm:ss", dataValue:getDateArray('ymdhis') })
    }
    action.dateTypeOptions = dateTypeOptions
    action.dateType = props.type
    const { playTime , endTime } = props.timeval
    if(!playTime || !endTime) return
    editDatePicker()
  }
  nextTick(()=>{
    initialTime()
  })
  defineExpose({
    initialTime
  })
</script>

<template>
  <div v-if="action.dateTypeOptions.length > 0" class="labelItem xmDataPicker">
    <div class="label">日期：</div>
    <el-date-picker
      v-model="action.dataValue"
      :type="action.dateType"
      :format="action.format"
      value-format="x"
      :clearable="false"
      range-separator="至"
      placeholder="选择日期"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      @change="pickerChange"
    />
    <el-select v-model="action.dateType" @change="editDatePicker" placeholder="类型">
      <el-option
        v-for="(item, index) in action.dateTypeOptions"
        :key="index"
        :label="item.label"
        :value="item.value"
      />
      
    </el-select>
  </div>
</template>

<style lang='scss' scoped>
  .xmDataPicker {
    :deep(.el-select) {
      width: 60px !important;
    }
  }
</style>